<template>
    <view class="product-details pb-150">
        <!-- 头部 -->
        <view class="f ai-c jc-s-b ph-32 pv-12 hearder" :style="{ top: statusBarHeight + 'px' }" v-show="show">
            <view class="w-64 h-64 b-64 f ai-c jc-c black" @click="toBack">
                <image src="http://cwht.ricecs.cn/app/shop/back-b.png" class="w-32 h-32"></image>
            </view>
            <view class="f ai-c mp-weixin">
              <view class="w-64 h-64 b-64 f ai-c jc-c mr-20 black" @click="handleCollect">
                  <image :src="isCollect ? collectY : collectB" class="w-32 h-32"></image>
              </view>
                <view class="w-64 h-64 b-64 f ai-c jc-c black" @click="handleShare">
					<button plain style="margin: 0;padding: 0;border: none;" open-type="share">
                    <image src="http://cwht.ricecs.cn/app/shop/share-b.png" class="w-32 h-32"></image>
					</button>
                </view>
            </view>
        </view>
        <!-- 滚动头部 -->
        <view :style="{ paddingTop: statusBarHeight + 'px' }" class="roll-hearder" v-show="!show">
            <view class="h-88 ph-32 f ai-c jc-s-b">
                <view class="f ai-c">
                    <image src="../../static/logo.png" class="w-40 h-33 mr-32" @click="toBack">></image>
                    <view class="fs-32 text-color3 mr-32" :class="moduleId == 'info' ? 'active' : ''" @click="toRoll('info')">详情</view>
                    <view class="fs-32 text-color3 mr-32" :class="moduleId == 'buyerReading' ? 'active' : ''" @click="toRoll('buyerReading')">购物须知</view>
                    <view class="fs-32 text-color3 mr-32" :class="moduleId == 'evaluate' ? 'active' : ''" @click="toRoll('evaluate')">评价</view>
                </view>
                <view class="f">
                    <image src="http://cwht.ricecs.cn/app/shop/collect-h.png" class="w-40 h-40 mr-32"></image>
                    <image src="http://cwht.ricecs.cn/app/shop/share-h.png" class="w-40 h-40"></image>
                </view>
            </view>
        </view>
        <!-- 内容 -->

        <Banner  :detail="detail"/>
        <!-- 价格 -->
        <Price  :detail="detail"/>
        <!--  -->
        <view class="tab w-f mt-20 f jc-c ai-c" v-show="show">
            <u-tabs
                :list="statusList"
                @click="changeStatus"
                lineColor="#FABB3C"
                lineWidth="28rpx"
                lineHeight="6rpx"
                :activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
                :inactiveStyle="{ fontSize: '28rpx', color: '#999999' }"
                :itemStyle="{ paddingRight: '48rpx', paddingLeft: '48rpx', height: '70rpx' }"
            ></u-tabs>
        </view>
        <!-- 详情 -->
        <Info id="info" :detail="detail" :shopData="shopData"  ref="info"/>
        <!-- 购物须知 -->
        <BuyerReading id="buyerReading" :shopData="shopData" :detail="detail"/>
        <!-- 评价 -->
        <Evaluate id="evaluate"  ref="evaluate" :detail="detail"/>

        <!-- 普通底部 -->
        <Foot :detail="detail" />

        <!-- 回到顶部 -->
        <view class="w-96 h-96 b-96 f ai-c jc-c fd-c to-top" @click="toTop">
            <image src="http://cwht.ricecs.cn/app/shop/top.png" class="w-24 h-26"></image>
            <view class="fs-24 fw-500 text-color4 mt-4">顶部</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onReady, onPageScroll } from '@dcloudio/uni-app';
import Banner from './Banner.vue';
import Price from './Price.vue';
import Info from './Info.vue';
import BuyerReading from './BuyerReading.vue';
import Evaluate from './Evaluate.vue';
import Foot from './Foot.vue';
import { storeDetail } from '@/services/api/shop/index';
import { spuGetDetail } from '@/services/api/serve/index';
import { favoriteExits, favoriteCreate, favoriteDelete } from '@/services/api/shop/collect';
import collectB from '@/static/shop/collect-b.png';
import collectH from '@/static/shop/collect-h.png';
import collectY from '@/static/shop/collect-y.png';
const id = ref('');
const show = ref(true);
const detail = ref<any>({});
//店铺详情
const shopData = ref({});
//滚动模块
const banner = ref();
const shop = ref();
const info = ref('');
const share = ref();
//是否收藏
const isCollect = ref(false);
const statusList = [
    { name: '详情', type: 'info' },
    { name: '购物须知', type: 'buyerReading' },
    { name: '评价', type: 'evaluate' },
];
const moduleId = ref('');
const infoModule = ref(0);
const buyerReadingModule = ref(0);
const evaluateModule = ref(0);
onLoad((options: any) => {
	id.value = options.id
	getDetail()
});
onReady(() => {
    uni.createSelectorQuery()
        .select('#info')
        .boundingClientRect((rect: any) => {
            infoModule.value = rect.top;
        })
        .exec();
    uni.createSelectorQuery()
        .select('#buyerReading')
        .boundingClientRect((rect: any) => {
            buyerReadingModule.value = rect.top;
        })
        .exec();
    uni.createSelectorQuery()
        .select('#evaluate')
        .boundingClientRect((rect: any) => {
            evaluateModule.value = rect.top;
        })
        .exec();
});
onPageScroll((e) => {
    if (e.scrollTop < 400) {
        show.value = true;
    } else {
        show.value = false;
    }
    if (e.scrollTop > 400 && e.scrollTop < infoModule.value) {
        moduleId.value = 'info';
    } else if (e.scrollTop > infoModule.value && e.scrollTop < buyerReadingModule.value) {
        moduleId.value = 'buyerReading';
    } else if (e.scrollTop > buyerReadingModule.value && e.scrollTop < evaluateModule.value) {
        moduleId.value = 'evaluate';
    }
});
const toRoll = (type: string) => {
    if (type === 'info') {
        uni.pageScrollTo({
            scrollTop: infoModule.value - 100,
            duration: 200,
        });
    } else if (type === 'buyerReading') {
        uni.pageScrollTo({
            scrollTop: buyerReadingModule.value - 100,
            duration: 200,
        });
    } else if (type === 'evaluate') {
        uni.pageScrollTo({
            scrollTop: evaluateModule.value - 100,
            duration: 200,
        });
    }
    moduleId.value = type;
};
const changeStatus = (data: any) => {
    toRoll(data.type);
};
//头部
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#ffffff',
});

//详情
async function getDetail() {
    const { data } = await spuGetDetail({ id: id.value });
	// console.log(data)
    data.picUrls = data.picUrls;
    detail.value = data;
    getShop();
	getFavoriteExits();
}
//店铺详情
async function getShop() {
    const { data } = await storeDetail({ storeId: detail.value.storeId });
    shopData.value = data;
}
//回到顶部
const toTop = () => {
    uni.pageScrollTo({
        scrollTop: 0,
        duration: 200,
    });
};
const toBack = () => {
    uni.navigateBack();
};

//检查是否收藏
async function getFavoriteExits() {
    const { data } = await favoriteExits({ id: id.value,collectionType:2 });
    isCollect.value = data;
}

//收藏/取消商品
async function handleCollect() {
    isCollect.value = !isCollect.value;
    if (isCollect.value) {
        await favoriteCreate({ id: id.value,collectionType:2 });
    } else {
        await favoriteDelete({ id: id.value ,collectionType:2});
    }
}
</script>
<style lang="scss" scoped>
.product-details {
    background: #f5f5f5;
    min-height: 100vh;
    //#ifdef MP-WEIXIN
    .mp-weixin {
        margin-right: 170rpx;
        border-radius: 24rpx 24rpx 0 0;
    }
    //#endif
    .tab {
        background-image: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    }
    .roll-hearder {
        background: #fff;
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 111;
        .active {
            font-weight: 600;
            color: #fac519;
        }
    }
    .to-top {
        border: 1rpx solid #dddddd;
        box-shadow: 0 2rpx 12rpx 0 #0000000f;
        position: fixed;
        right: 20rpx;
        bottom: 200rpx;
        background: #fff;
    }

    .hearder {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 111;
    }
    .black {
        background: rgba(0, 0, 0, 0.4);
    }
}
</style>
